import React, { useContext } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import { Context } from '../../App'

export default function Search({ className }) {
    const { searchMeal } = useContext(Context)

    const searChHandler = (e) => {
        const keyword = e.target.value
        searchMeal(keyword)
    }

	return (
		<div className={classnames(className, styles.root)}>
            <div className='inputWrapper'>
                <FontAwesomeIcon icon={faSearch} className="icon" />
			    <input type="text" placeholder="请输入关键字" className='input' onChange={searChHandler}/>
            </div>
		</div>
	)
}
